// app/(dashboard)/layout.tsx - 并行路由布局
'use client';

import { Suspense } from 'react';
import { Spin } from 'antd';
import { useSearchParams } from 'next/navigation';

// 并行路由插槽：@sidebar（侧边栏）、@main（主内容）、@modal（悬浮面板）
export default function DashboardLayout({
    children, // 默认主内容（对应@main）
    sidebar,  // 并行路由@sidebar
    modal,    // 并行路由@modal
}: {
    children: React.ReactNode;
    sidebar: React.ReactNode;
    modal: React.ReactNode;
}) {
    const searchParams = useSearchParams();
    const modalType = searchParams.get('modal');
    return (
        <div style={{ display: 'flex', height: '100vh' }}>
            {/* 侧边栏区域 */}
            <div style={{ width: 250, borderRight: '1px solid #e8e8e8' }}>
                <Suspense fallback={<Spin size="large" style={{ margin: '20px' }} />}>
                    {sidebar}
                </Suspense>
            </div>

            {/* 主内容区域 */}
            <div style={{ flex: 1, overflow: 'auto', padding: '20px' }}>
                {children}
            </div>

            {/* 悬浮面板区域（覆盖在主内容上） */}
            <div style={{ position: 'fixed', inset: 0, pointerEvents: 'none' }}>
                <Suspense fallback={null}>
                    {modalType === 'edit-user' && modal} {/* 只在modal=edit-user时显示 */}
                </Suspense>
            </div>
        </div>
    );
}